<template>
    <div class="panel-body panel-list">
        <div class="panel-header">
            <div class="panel-title">
                {{ meta_name }}
            </div>
        </div>
        <div class="panel-main">
            <div class="panel-btns">
                <el-button type="success" icon="fa fa-refresh" @click="list()" size="small"> 刷新</el-button>
                <el-button type="primary" icon="fa fa-plus" @click="create()" size="small"> 新增</el-button>
            </div>
            <el-table v-loading="loading"
                      element-loading-text="努力加载中..."
                      element-loading-spinner="el-icon-loading"
                      ref="multipleHandle"
                      tooltip-effect="dark"
                      :data="listData" border>
                <el-table-column align="center" prop="id" label="编号" width="60"></el-table-column>
                <el-table-column prop="title_show" label="名称" width="250"></el-table-column>
                <el-table-column label="操作" >is_page_text
                    <template slot-scope="scope">
                        <el-button @click="edit(scope.row)" icon="fa fa-edit" type="primary" size="mini" plain> 编辑</el-button>
                        <el-button @click="destroy(scope.row)" icon="fa fa-trash" type="info" size="mini" plain> 删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination"  v-if="listData">
                <div class="pagination-total">共 <em> {{listData.length}} </em> 条记录</div>
            </div>
        </div>
        <!-- 表单弹窗-->
        <el-dialog
            v-if="dialog.show"
            :title="dialog.title"
            :top="dialog.top"
            :visible.sync="dialog.show"
            :width="dialog.width">
            <el-form :model="form" ref="form" label-width="100px">
                <el-form-item :rules="[{ required: true, message: '请输入类目名称', trigger: 'blur'}]" label="名称：" prop="name">
                    <el-input clearable  v-model="form.name" placeholder="请输入类目名称"></el-input>
                </el-form-item>
                <el-form-item :rules="[{ required: true, message: '请选择上级类目', trigger: 'blur'}]" label="上级：" prop="pid">
                    <el-select v-model="form.pid" filterable placeholder="请选择上级类目">
                        <el-option
                            v-for="item in cateTree"
                            :key="item.id"
                            :label="item.title_show"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialog.show = false">取 消</el-button>
                <el-button type="primary" @click="update()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<!---->
<script>
import {mapGetters} from 'vuex';
import {
    CategoryList,
    CategoryUpdate,
    CategoryDestroy
} from '../../utils/request';
export default {
    computed: {
        ...mapGetters(['meta_name','loading']),
    },
    data() {
        return {
            listData: [],//列表数据
            dialog: {
                title: '',
                top: '25vh',
                show: false,
                width: '600px'
            },
            form:null,
            cateTree: [],
        }
    },
    activated() {
        this.list();
    },
    methods: {
        //新增
        create(){
            this.form = {
                id: 0,
                title: '',
                pid: 0,
                status: 1,
            };
            this.dialog.title = '新增类目';
            this.dialog.show = true;
        },
        //编辑
        edit(info){
            this.form = {
                id: info.id,
                name: info.name,
                pid: info.pid,
                status: info.status,
            };
            this.dialog.title = '编辑类目';
            this.dialog.show = true;
        },
        //列表
        list(){
            this.$store.dispatch('setLoading', true);
            let cateInit = [{id:0,title_show:'顶级分类'}];
            CategoryList().then((res)=>{
                if (res.code) {
                    this.$notify.error({title: 'ERROR', message: res.msg});
                } else {
                    this.listData = res.data;
                    this.cateTree = cateInit.concat(res.data);
                }
                this.$store.dispatch('setLoading', false);
            })
        },
        //更新
        update(){
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    CategoryUpdate(this.form).then((res)=>{
                        if(res.code){
                            this.$notify.error({title: 'ERROR', message: res.msg});
                        }else{
                            this.$notify({
                                type: 'success',
                                duration:1000,
                                title: 'SUCCESS',
                                message: res.msg, onClose:()=>{
                                    this.dialog.show = false;
                                    this.list();
                                }});
                        }
                    });
                }
            });
        },
        //删除
        destroy(info){
            this.$confirm('确定要删除"'+info.name+'"该类目信息吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                CategoryDestroy({id: info.id}).then((res) => {
                    if (res.code) {
                        this.$notify.error({title: 'ERROR', message: res.msg});
                    } else {
                        this.list();
                    }
                });
            }).catch(() => {});
        },
    }
}
</script>
